<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/test/jquery/utils.js"></script>
    <script type="text/javascript" src="/test/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">	
	function showElements(form){
		var s="";
		for(var i=0;i<form.elements.length;i++){ //循环显示表单元素的数据
			s+=form.elements[i].tagName+":"+form.elements[i].name+"="+form.elements[i].value+"\n";
		}
		alert(s);
	}
	
	function show(){
		//获取表单对象
		//var formObj=document.forms[0]; //通过索引获取表单
		//var formObj=document.forms["formName"]; //通过名字获取表单对象
		var formObj=document.formName; 
		//alert("form's action="+formObj.action);
		//showElements(formObj);
		//var　userName=formObj.elements[0];
		//var　userName=formObj.elements["userName"];  
		var userName=formObj.userName;
		//alert("userName's value="+userName.value);
		
		var userSex=formObj.userSex;
		//alert(userSex);
		userSex[0].checked=true;  //修改单选项的选中值
		formObj.userRelax[1].checked=true;　//修改复选框的选中值
		formObj.userRelax[2].checked=true;
		
		var selectObj=formObj.userJob; //下拉列表
		var selectValue=selectObj.value;//列表选中值
		alert("列表值："+selectValue);
		var selectedIndex=selectObj.selectedIndex; 
		alert("列表选中索引："+selectedIndex);
		
		//selectObj.selectedIndex=0; //修改下拉列表的选项
		selectObj.value=30; //value=ｓｅｌｅｃｔ列表的ｏｐｔｉｏｎ选项值，修改列表选项
		var optionInfo="";
		for(var i=0;i<selectObj.options.length;i++){
			var optionObj=selectObj.options[i]; //获取一个<option>
			optionInfo+="value="+optionObj.value+",text="+optionObj.text+",selected="+optionObj.selected+"\n";
			if(i==1){
				optionObj.selected=true; //修改ｏｐｔｉｏｎ的选中设置
			}
		}
		alert(optionInfo);
	}
	
	/*校验文本数据非空
	txtObj:文本对象
	errSpanId:　错误提示块的id
	errMsg:错误提示内容
	return true:数据非空；　false:空数据
	*/
	function validNotEmpty(txtObj,errSpanId,errMsg){
		var txtValue=txtObj.value;
		var errSpan=document.getElementById(errSpanId);			
		if(txtValue=='' || txtValue.trim()==""){
			if(errSpan!=null){
				errSpan.innerText=errMsg;
			}
			return false;
		}else{
			if(errSpan!=null){
				errSpan.innerText="";
			}
			return true;
		}
	}
	function jqcheckempty(idname,errSpanId,errMsg){
		obj=$(idname);
		err=$(errSpanId);
		value=obj.val();
		if(value==""||value.trim()=="")
		{
			if(err!=null)
			{
				err.innerText=errMsg;
				/*err.empty();
				err.append(errMsg);*/
				
			}
			return false;
		}
		else
		{
			if(err!=null)
			{
				err.append("");
			}
			return true;
		}
	}
	
	/*校验文本数据长度
	txtObj:文本对象
	errSpanId:　错误提示块的id
	errMsg:错误提示内容
	return true:数据非空；　false:空数据
	*/
	function validLength(txtObj,minLen,maxLen,errSpanId,errMsg){
		var txtValue=txtObj.value;
		var errSpan=document.getElementById(errSpanId);			
		if(txtValue.length<minLen || txtValue.length>maxLen){
			if(errSpan!=null){
				errSpan.innerText=errMsg;
			}
			return false;
		}else{
			if(errSpan!=null){
				errSpan.innerText="";
			}
			return true;
		}
	}
	function jqchecklength(idname,errSpanId,errMsg)
	{
		var obj=$(idname);
		var err=$(errSpanId);
		value=obj.val();
		if(value.length<6 || value.length>20)
		{
			//alert(value.length);
			if(err!=null){
				err.empty();
				err.append(errMsg);
			}
			return false;
		}
		else{
		
			if(err!=null){
			err.append("");
			}
			return true;
		}
	}
	
	/*校验单、复选框选项比选一项
	objAry:选项对象数组
	errSpanId:　错误提示块的id
	errMsg:错误提示内容
	return true:数据非空；　false:空数据
	*/
	function validChecked(objAry,errSpanId,errMsg){
	    var result=false; //默认不通过校验
		for(var i=0;i<objAry.length;i++){
			var obj=objAry[i]; //获取一项元素
			//判断是否选中
			if(obj.checked==true){
				result=true;
				break;
			}		
		}
		
		var errSpan=document.getElementById(errSpanId);	
		if(result==false){			
			if(errSpan!=null){
				errSpan.innerText=errMsg;
			}
		}else{
			if(errSpan!=null){
				errSpan.innerText="";
			}
		}
		return result;
	}
	function jqchecked(idname,errSpanId,errMsg)
	{
		var result=false;
		obj=$(idname);
		obj.each()
	}
	/*提交表单*/
	function submitForm(){
		var formObj=document.formName; 
		//表单校验：
		var valid=true; //设置标志位，ｔｒｕｅ表示校验通过
		var errMsg="表单填写错误：\n";
		//依次校验表单元素
		/*var userName=formObj.userName.value; //获取元素数值
		if(userName=="" || userName.trim()==""){
			var errSpan=document.getElementById("userNameErrSpan");
			errSpan.innerText="用户名必填！";
			//errMsg+="用户名必填！\n";
			//formObj.userName.focus();//焦点
			valid=false;
		}
		var userPwd=formObj.userPwd.value; //获取元素数值
		if(userPwd=="" || userPwd.trim()==""){
			document.getElementById("userPwdErrSpan").innerText="密码必填！";
			//errMsg+="密码必填！\n";
			//formObj.userPwd.focus();//焦点
			valid=false;
		}*/
		
		/*if(!validNotEmpty(formObj.userName,"userNameErrSpan","用户名必填！")){
			
			valid=false; //校验未通过
		}
		if(!validNotEmpty(formObj.userPwd,"userPwdErrSpan","密码必填！")){
			valid=false; //校验未通过
		}else{
			if(!validLength(formObj.userPwd,6,20,"userPwdErrSpan","密码长度必须在6到20位之间！")){
				valid=false; //校验未通过
			}
		}
		
		if(!validChecked(formObj.userSex,"userSexErrSpan","性别必选！")){
			valid=false; //校验未通过
		}
		if(!validChecked(formObj.userRelax,"userRelaxErrSpan","爱好必选！")){
			valid=false; //校验未通过
		}
		if(!validChecked(formObj.userRelax,"userJob","请职业选择！")){
			valid=false; //校验未通过
		}*/
		//如果通过表单校验，则提交
		if(!jqcheckempty("#idusername","#userNameErrSpan","用户名必填！"))
			valid=false;//校验未通过
		if(!jqcheckempty("#idpassword","#userPwdErrSpan","密码必填！"))
		{valid=false;} //校验未通过
		else{
			if(!jqchecklength("#idpassword","#userPwdErrSpan","密码长度必须在6到20位之间！"))
				valid=false;
		}
		
		if(valid==true){
			formObj.submit(); //通过表单的ｓｕｂｍｉｔ()方法提交表单
		}else{
			//alert(errMsg);
		}		
	}
	</script>
  </head>
  
  <body>
  <input type="button" value="showInfo" onclick="show()"/>
  <form name="formName" action="formResult.jsp" method="get">
	     <table border="1" cellpadding="5" cellspacing="0">
	    	<caption>新增用户 </caption>
	    	<tr>	    		
	    		<td>姓名：</td>
	    		<td><input id="idusername" type="text" name="userName" value="" />&nbsp;<span style="color:red">*</span>&nbsp;<span id="userNameErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>	    		
	    		<td>密码：</td>
	    		<td><input id="idpassword" type="password" name="userPwd"/>&nbsp;<span style="color:red">*</span>&nbsp;<span id="userPwdErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>	    		
	    		<td>性别：</td>
	    		<td><input id="idnan" type="radio" name="userSex" value="0" sexLabel="男" label="性别：男">男
	    		    <input id="idnv" type="radio" name="userSex" value="1" sexLabel="女">女&nbsp;<span style="color:red">*</span>&nbsp;<span id="userSexErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>    		
	    		<td>爱好：</td>
	    		<td><input id="idyouyong" type="checkbox" name="userRelax" value="0">游泳
	    		    <input id="idyuedu" type="checkbox" name="userRelax" value="1" >阅读
	    		    <input id="idlanqiu" type="checkbox" name="userRelax" value="2">篮球&nbsp;<span style="color:red">*</span>&nbsp;<span id="userRelaxErrSpan" style="color:red"></span></td>    		
	    	</tr>
	    	<tr>    		
	    		<td>职业：</td>
	    		<td><select id="iduserjob" name="userJob" > <!--  size="10" multiple="true"-->
	    				<option value="">请选择职业 </option>
	    				<option value="10" >护士 </option>
	    				<option value="20">医生</option>
	    				<option value="30">教师 </option>
	    				<option value="40">自由职业 </option>
	    		    </select>
	    		    &nbsp;<span style="color:red">*</span>&nbsp;<span id="userJobErrSpan" style="color:red"></span>
	    		    </td>    		
	    	</tr>
	    	<tr>
	    		<td>头像：</td>
	    		<td><input id="iduserface" type="file" name="userFace" /></td>
	    		
	    	</tr>
	    	<tr>
	    		<td>备注：</td>
	    		<td><textarea name="bz" cols="100" rows="10">备注内容</textarea></td>
	    		
	    	</tr>
	    	<tr>
	    		<td colspan="2" align="center">
	    		<input id="idtijiao" type="button" value="提交" onclick="submitForm()"/>
	    		<input id="idchongzhi" type="reset" value="重置"/>
	    		<input id="iddemo" type="button" value="demo" onclick="show()"/>
	    		</td>
	    		
	    	</tr>	    	
	    </table>
	    
  </form> 
    
  </body>
</html>
